<template>
  <div>
    <!-- <NavMenu></NavMenu> -->
    <!-- <h1 id="comment">留言展示：
    <span>您好，我想得到贵公司笔试的机会</span>
    </h1>
    <label>
      <span>留言：</span>
      <el-input type="textarea" :rows="2" id="commentInput"  placeholder="请输入内容" ></el-input>
    </label>
    <el-button type="primary" disabled>确定</el-button>
    <el-button type="primary" >取消</el-button> -->
    <div class="container">
      <div id="commentWarp">
        <el-form :model="form" :label-position="`right`" :rules="rules" ref="messageForm" label-width="80px">
          <el-form-item label="职位" prop="job">
            <el-input v-model="form.job" placeholder="你对哪个职位感兴趣呢"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="怎么称呼你呢"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="form.phone" placeholder="请留下你的电话，方便我们联系你"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请留下你的邮箱，方便我们联系你"></el-input>
          </el-form-item>
          <el-form-item label="留言" prop="comments">
            <el-input type="textarea" :autosize="form.rows" v-model="form.comments" placeholder="留下你相对我们说的话吧！"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('messageForm')">留言</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import ajax from "@/components/ajax";
import NavMenu from "@/components/NavMenu";
export default {
  name: "comments",
  data() {
    return {
      form: {
        name: "",
        phone: "",
        email: "",
        comments: "",
        rows: {
          minRows: 3,
          maxRows: 6
        }
      },
      rules: {
        name: [
          { required: true, message: "请输入名字", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入电话", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
        ],
        comments: [
          { required: true, message: "请输入留言", trigger: "blur" },
          { max: 100, message: "长度小于100 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      const that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          const data = this.$refs[formName].model;
          let formData = new FormData();
          formData.append("job", data.job);
          formData.append("name", data.name);
          formData.append("phone", data.phone);
          formData.append("email", data.email);
          formData.append("comments", data.comments);
          formData.append("recv", that.$route.query.id);

          ajax({
            method: "post",
            url: "http://127.0.0.1:3000/setComments",
            data: formData,
            withCredentials: true,
            success: function(res) {
              if (res.status === 0) {
                that.$message({
                  message: "留言成功",
                  type: "success"
                });
              } else {
                that.$message.error({
                  message: "失败"
                });
              }
            }
          });
        } else {
          console.log("error submit!");
          return false;
        }
      });
    }
  },
  components: {
    NavMenu
  }
};
</script>

<style>
.container {
  margin: 40px 0;
  display: flex;
  justify-content: center;
}

#commentWarp {
  width: 30vw;
}

#comment {
  text-align: left;
  font-size: 25px;
  padding: 0px 0px 10px 40px;
  border-bottom: 1px solid #e4e4e4;
  margin: 10px 200px 30px 200px;
  color: #888;
  display: block;
}

#comment > span {
  font-size: 15px;
}

label {
  display: block;
  margin: 0px;
}

label > span {
  float: left;
  width: 20%;
  text-align: right;
  padding-right: 10px;
  margin-top: 10px;
  color: #888;
}

#commentInput {
  display: inline;
}

.button {
  background: #e27575;
  border: none;
  padding: 10px 25px 10px 25px;
  color: #fff;
  box-shadow: 1px 1px 5px #b6b6b6;
  border-radius: 3px;
  text-shadow: 1px 1px 1px #9e3f3f;
  cursor: pointer;
}

.button:hover {
  background: #cf7a7a;
}
</style>
